<template>
  <div>
    <el-image
      style="width: 100vw; height: calc(100vh - 5px); overflow: hidden"
      :src="url"
      fit="cover"
    />

    <div class="main">
      <div style="width: 100%; text-align: center; margin-bottom: 60px">
        <!-- 头部 -->
        <h3>乘凉个人博客后台管理</h3>
      </div>
      <!-- 主体 -->
      <div style="width: 100%; text-align: center">
        <div class="inp">
          <el-input
            v-model.trim="login.username"
            placeholder="请输入账号"
            :prefix-icon="User"
            style="width: 250px"
          ></el-input>
        </div>
        <div class="inp">
          <el-input
            v-model.trim="login.password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            style="width: 250px"
            type="password"
            :show-password="true"
          ></el-input>
        </div>
        <div
          style="width: 250px; display: flex; justify-content: space-between; padding: 0 25px"
          class="inp"
        >
          <el-input
            v-model.trim="login.code"
            placeholder="请输入验证码"
            :prefix-icon="Edit"
            style="width: 150px"
          ></el-input>
          <div @click="getKaptch">
            <img :src="baseImg" alt="" style="height: 30px" />
          </div>
        </div>
        <div style="width: 100%; text-align: left; margin-left: 25px" class="inp">
          <el-checkbox v-model="isRemember" label="记住密码" />
        </div>
        <div>
          <el-button type="primary" style="width: 250px" @click="submit">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import request from '@/util/request'
import url from '@/assets/img/loginBack.jpg'
import { User, Lock, Edit } from '@element-plus/icons'
import { ElNotification } from 'element-plus'
import titleUtil from '@/util/titleUtil'
import { useRouter } from 'vue-router'

const isRemember = ref(false)
const login = ref({
  username: '',
  password: '',
  uuid: '',
  code: ''
})

const router = useRouter()
const baseImg = ref('')

const submit = () => {
  console.log('登录了', localStorage.getItem('token'), login.value)
  console.log(isRemember.value)

  if (login.value.username === '' || login.value.password === '' || login.value.code === '') {
    ElNotification.warning('抱歉，账号、密码、验证码不能为空')
    return
  }

  if (titleUtil.isEnglish(login.value.username) === '') {
    ElNotification.warning('抱歉，用户名不能为中文')
    return
  }
  request
    .post('/admin/login', login.value)
    .then((res) => {
      ElNotification.success('登录成功！')
      console.log(res.data)

      if (isRemember.value) {
        localStorage.setItem('login', JSON.stringify(login.value))
      }
      localStorage.setItem('user', JSON.stringify(res.data))
      localStorage.setItem('token', res.data.token)
      router.push('/admin')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }

      getKaptch()
    })
}

const getKaptch = () => {
  console.log('执行了')

  request
    .get('/user/captcha')
    .then((res) => {
      console.log('获取成功：', res)
      login.value.uuid = res.data.uuid
      baseImg.value = res.data.base64Img
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}

onMounted(() => {
  const localLogin = JSON.parse(localStorage.getItem('login'))
  if (localLogin && localLogin != null) {
    if ((localLogin.username && localLogin.username != '') || localLogin.username != null) {
      login.value.username = localLogin.username
    }
    if ((localLogin.password && localLogin.password != '') || localLogin.password != null) {
      login.value.password = localLogin.password
    }
  }

  getKaptch()
})
</script>

<style scoped>
.main {
  width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  height: 350px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  transform: translate(-50%, -50%);
}

.inp {
  margin-top: 20px;
}
</style>
